<template>
  <div class="home">
    <h1>Test这是一个新项目</h1>
  </div>
  <div>

    <RouterLink to="/">Go to Home.vue</RouterLink>


<div>
    <button @click="router.push('/')">跳转到新的Home页面</button>


</div>





  </div>
  <div>
    {{a}}
    {{b}}
  </div>
  <div>
    {{data.name}}
    {{data.age}}
  </div>

  <div>
    <!--   //数据的双向绑定-->
    <input v-model="data.name">

  </div>


  <div>
    <!--    //v-if v-else-->
    <span style="color: red" v-if="data.cname ==='佩奇'" >小猪佩奇</span>
    <span style="color: red" v-else-if="data.cname ==='乔治'" >小猪乔治</span>
    <span style="color: red" v-else>小猪腿</span>


  </div>



  <div style="display: flex">
    <div @click = "show(item)" style="color: red;margin: 20px;border: 10px" v-for="item in data.arr">{{ item }}</div>




  </div>


  <div>
    <!--选框代码-->
    <select>
      <option v-for="item in data.fruit">{{ item }}</option>
    </select>

  </div>


  <div>
    <button @click="click">点我嘉豪运动</button>


  </div>
  <div>
    <span :style="data.box">加加加</span>
    <div>
      <img :src="data.src" alt=""/>
    </div>


  </div>
  <div>
    <div class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <div class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </div>
  </div>


  <div>
    <el-icon :size="data.size" :color="color">
      <Edit />
    </el-icon>

    <el-icon><Check /></el-icon>

  </div>



  <div>

    <el-input v-model="data.input" style="width: 240px" placeholder="Please input" :suffix-icon="Calendar"/>{{data.input}}
    <el-input v-model="data.input" style="width: 240px" placeholder="Please input" :prefix-icon="Search"/>{{data.input}}
    <!--    前后标签位置用 前:suffix-icon 后:prefix-icon="xxxx"-->
    <!--    添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。-->

    <!--    文本域高度可通过 rows 属性控制-->
    <el-icon><Search /></el-icon>
    <!--    //readonly-->
  </div>



  <div class="flex flex-wrap gap-4 items-center">
    <el-select
      v-model="data.value"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in data.option"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>


  </div>


  <div class="flex flex-wrap gap-4 items-center" style="margin: 20px">
    <el-select
      v-model="data.value"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in data.option"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>


  </div>

  <div class="flex flex-wrap gap-4 items-center" style="margin: 20px">
    <el-select
      multiple
      v-model="data.value"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in data.option"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>


  </div>



  <div>
    <el-radio-group v-model="data.sex">
      <el-radio value="男" size="large">男</el-radio>
      <el-radio value="女" size="large">女</el-radio>
    </el-radio-group>{{data.sex}}



  </div>



  <div>    <!--  单选按钮组常用于页面切换-->
    <el-radio-group v-model="data.radio1" size="large">
      <el-radio-button label="我发布的" value="我发布的" />
      <el-radio-button label="我关注的" value="我关注的" />
      <el-radio-button label="我点赞的" value="我点赞的" />
    </el-radio-group>


  </div>

  <div>

    <div>
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox label="Option A" value="Value A" />
        <el-checkbox label="Option B" value="Value B" />
        <el-checkbox label="Option C" value="Value C" />
      </el-checkbox-group>
    </div>{{data.checkList}}

  </div>
  <div>
    <!--使用网络地址是可以渲染图片的，使用本地的路径无法渲染，只能先import导入图片，然后使用src属性引入即可-->
    <div class="demo-image__preview">
      <el-image
        style="width: 100px; height: 100px"
        :src= "img"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="imags.srcList"
        show-progress
        :initial-index="4"
        fit="cover"
      />
    </div>
  </div>
  <div style="margin: 0 auto">
    <el-carousel height="800px" style="width:500px;margin: 0 auto" >
      <el-carousel-item v-for="item in images" :key="item">
        <img :src="item"  style="height:800px;margin: 0 auto"/>
      </el-carousel-item>
    </el-carousel>

  </div>


  <div style="margin: 20px auto">
    <!--  使用format指定输入框的格式。 使用 value-format 指定绑定值的格式。-->
    <span class="demonstration">{{ data.date }}</span>
    <el-date-picker
      v-model="data.date"
      type="date"
      format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"
    />


  </div>


  <div style="margin: 50px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="date" label="时间" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
            Detail
          </el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>



  </div>
  <div>

    <el-pagination
      v-model:current-page="data.currentPage4"
      v-model:page-size="data.pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div style="margin-bottom: 500px">

  </div>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { Calendar, Check, Edit, Search } from '@element-plus/icons-vue'
import img from '@/assets/logo.svg'
import lunbo1 from '@/assets/lunbo1.jpg'
import lunbo2 from '@/assets/lunbo2.jpg'
import lunbo3 from '@/assets/lunbo3.jpg'
import router from '@/router/index.js'


const images = [lunbo1,lunbo2,lunbo3]





//条用单个数值
const a = ref(1)
const b=ref("请厉害")
const click = () => {
  alert("点我加好运")

}
const show = (value) => {
  alert(value)

}
const handleClick =(id)=>{
  delete data.tableData[id]
  alert("删除成功")

}

const imags =reactive(
  {
    srcList: [
      "https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png",
      "https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-55.png"]
  }
)
const clickdata = () => {
  alert("我当前使用的是eleplus")

}
onMounted(() => {
  console.log("页面加载完成")

})


const data1=reactive({
  id: router.currentRoute.value.query.id,
  name: router.currentRoute.value.query.name,
})
console.log("获取的id为："+data1.id+"，获取的name为："+data1.name)
const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
// 条用多个数值或者数组比较推荐,需要导包import { reactive, ref } from 'vue'
const data =reactive(
  {
    name: "张三",
    age: 18,
    cname: '佩奇',
    arr:['小猪佩奇','小猪乔治','小猪腿'],
    fruit:["苹果","香蕉","橘子"],
    box: {
      width:'100px',
      height:'100px',
      backgroundColor:'red'},
    src: "https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png",
    size:'20px',
    input:null,
    option:["苹果","香蕉","橘子"],
    sex: "男",
    radio1: "我关注的",
    checkList:[],
    date: new Date(),
    currentPage4:1,
    pageSize4:5,
    tableData:[
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 4,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },

    ]
  }
)
</script>
<style scoped>
.home{
  color: red;
}
</style>

